<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>全部</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_hsage5e3gw.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/all.css">
</head>
<body>
    <header>
        <p class="search w100p rel ml-20 mt-10">
            <i class="iconfont icon-sousuo abs f14"></i>
            <input type="text" class="search-box" placeholder="了不起的面包怪">
        </p>
        <nav class="navigation mt-10 mb-20 flex jc-sa">
            <a onclick="changeNav(1);" class="link f18 f666 fw-b" href="#">推荐</a>
            <a onclick="changeNav(2);" class="link f18 f666 fw-b" href="#">书单</a>
            <a onclick="changeNav(3);" class="link active f18 f666 fw-b" href="#">全部</a>
        </nav>
    </header>
    <div style="height: 130px;"></div>
    <main>
        <!-- 列表 -->
        <ul class="link bg-fff w100p"  id="all">
            <!-- <li class="item flex">
                <img src="" alt="">
                <div class="word flex fdc ml-20">
                    <h3></h3>
                    <p></p>
                    <span></span>
                    <button>加入书架</button>
                </div>
            </li> -->
        </ul>
        

    </main>

    <div class="blank"></div>
    <footer>
        <div class="bg-fff flex jc-sa fixed w100p">
            <a class="link active flex fdc aic jc-c f888" href="./index.html">
                <i class="iconfont icon-huibenyuedu f22"></i>
                <span class="pt-5 f12">绘本</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./bookshelf.html">
                <i class="iconfont icon-wodeshujia f22"></i>
                <span class="pt-5 f12">书架</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./discover.html">
                <i class="iconfont icon-faxian f22"></i>
                <span class="pt-5 f12">发现</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./my.html">
                <i class="iconfont icon-gerenzhongxin f22"></i>
                <span class="pt-5 f12">我的</span>
            </a>
        </div>
    </footer>

    <script src="./js/axios.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/qiehuan.js"></script>
    <script>
        // 存储书本的信息
        var bookDetail = {};

        var Book = {
            // 加入书架
            addBookShelf: function() {
                var url = 'http://localhost:3001/bookshelf';
                var data = {
                    "imgUrl": bookDetail.imgUrl,
                    "bookname": bookDetail.bookname,
                    "author": bookDetail.author,
                    "ageRange": bookDetail.ageRange,
                    "category": bookDetail.category,
                    cTime: Date.now(),
                    bookId: bookDetail.id
                };

                axios.post(url, data).then(function (res) {
                    alert('加入成功');
                    console.log(res);
                }).catch(function (err) {
                    console.error('加入书架失败', err);
                });
            },

            // 添加阅读记录
            addReading: function() {
                var url = 'http://localhost:3001/reading'; // 假设这是添加阅读记录的API
                var data = {
                    "imgUrl": bookDetail.imgUrl,
                    "bookname": bookDetail.bookname,
                    "author": bookDetail.author,
                    "ageRange": bookDetail.ageRange,
                    "category": bookDetail.category,
                    cTime: Date.now(),
                    bookId: bookDetail.id
                };

                axios.post(url, data).then(function (res) {
                    alert('添加成功');
                    console.log(res);
                    // 跳转到阅读记录页面
                    window.location.href = './reading.html';
                }).catch(function (err) {
                    console.error('添加阅读记录失败', err);
                });
            },
        };

        // 获取列表数据
        var likeObj = {
            getList: function() {
                var url = 'http://localhost:3001/likeList';
                axios.get(url).then(function (res) {
                    console.log(res.data);
                    likeObj.render(res.data);
                }).catch(function (err) {
                    console.error('请求失败', err);
                });
            },
            // 渲染页面
            render: function(list) {
                var htmlStr = '';
                list.forEach(function (item) {
                    htmlStr += `
                        <li class="item flex bg-fff mt-20 pb-20" data-id="${item.id}">
                            <img src="${item.imgUrl}" alt="">
                            <div class="word flex fdc ml-20">
                                <h3>${item.bookname}</h3>
                                <p class="f14">${item.author} ${item.translator}</p>
                                <span>${item.category}</span>
                                <p>
                                    <button class="addReading" data-id="${item.id}">已阅读</button>
                                    <button class="addToShelf" data-id="${item.id}">加入书架</button>
                                </p>
                            </div>
                        </li>
                        `;
                });
                $('#all').html(htmlStr);

                // 绑定按钮点击事件
                $('.addReading').on('click', function() {
                    var bookId = $(this).data('id');
                    bookDetail = list.find(item => item.id === bookId);
                    Book.addReading();
                });

                $('.addToShelf').on('click', function() {
                    var bookId = $(this).data('id');
                    bookDetail = list.find(item => item.id === bookId);
                    Book.addBookShelf();
                });
            }
        };

        likeObj.getList();
    </script>
</body>
</html>